<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="menu_add()"></el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="menu" :apiObj="apiObj" row-key="id" @current-change="currentChange" stripe highlightCurrentRow>
                <sc-table-column label="序号" type="index" width="65"/>
                <el-table-column label="菜单名称" prop="menuName" max-width="300">
                    <template #default="scope">
                        <el-icon class="icon" v-if="scope.row.meta.icon" :size="14" style="margin-right: 5px; ">
                            <component :is="scope.row.meta.icon"/>
                        </el-icon>
                        {{ scope.row.menuName }}
                    </template>
                </el-table-column>
                <el-table-column label="菜单类型" prop="menuType" width="150" :formatter="formatter"></el-table-column>
                <el-table-column label="状态" prop="status" width="80">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="ENABLED"
                                   inactive-value="DISABLED"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="info" size="small" @click.stop="menu_show(scope.row)" icon="el-icon-view"></el-button>
                            <el-button type="primary" size="small" @click.stop="menu_add(scope.row)" icon="el-icon-plus"
                                       v-if="scope.row.menuType==='MENU' || scope.row.menuType ==='CATALOG'"></el-button>
                            <el-button type="primary" size="small" @click.stop="menu_edit(scope.row)" icon="el-icon-edit"></el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="menu_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button type="danger" size="small" @click.stop icon="el-icon-delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save-drawer v-if="drawer" ref="saveDrawer" @success="handleSuccess" @closed="drawer=false"></save-drawer>
</template>

<script>
import saveDrawer from './save'

export default {
    name: "settingMenu",
    components: {
        saveDrawer
    },
    data() {
        return {
            apiObj: this.$API.system.menu,
            menuloading: false,
            selection: null,
            drawer: false,
            dictMap: {},
            props: {
                menuType: 'MENU_TYPE'
            }
        }
    },
    mounted() {
        this.getDictMap()
    },
    methods: {
        //表格选择后回调事件
        currentChange(selection) {
            this.selection = selection;
        },
        //增加
        menu_add(row) {
            this.drawer = true
            this.$nextTick(() => {
                const pid = row ? row.id : '0';
                const pname = row ? row.menuName : '顶级菜单';
                const node = {id: pid, menuName: pname};
                const data = {
                    id: "",
                    parentId: pid,
                    menuName: "",
                    menuType: "MENU",
                    path: "",
                    component: "",
                    status: "ENABLED",
                    meta: {
                        icon: "",
                        active: "",
                        color: "",
                        redirect: "",
                        hidden: "NO",
                        breadcrumb: "NO",
                        fullPage: 'NO',
                        affix: 'NO',
                        tag: "",
                    }
                };
                this.$refs.saveDrawer.open('add').setData(data, node)
            })
        },
        //查看
        menu_show(row) {
            this.drawer = true
            this.$nextTick(() => {
                this.$refs.saveDrawer.open('show').setData(row, this.getParent(row.parentId))
            })
        },
        //树点击
        menu_edit(row) {
            this.drawer = true
            this.$nextTick(() => {
                this.$refs.saveDrawer.open('edit').setData(row, this.getParent(row.parentId))
            })
        },
        //删除菜单
        async menu_del(row) {
            const res = await this.$API.system.menu.delete(row.id);
            if (res.code === 200) {
                this.$refs.menu.refresh()
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        getParent(parentId) {
            if (!parentId || parentId === '0') {
                return {id: "0", menuName: "顶级菜单"};
            }
            return this.getParentRecursion(parentId, this.$refs.menu.tableData);
        },
        getParentRecursion(id, tableData) {
            let row;
            for (let index = 0; index < tableData.length; index++) {
                row = tableData[index]
                if (row.id === id) {
                    return row;
                } else if (row.children && row.children.length > 0) {
                    const result = this.getParentRecursion(id, row.children);
                    if (result) {
                        return result;
                    }
                }
            }
            return null
        },
        handleSuccess() {
            this.$refs.menu.refresh()
        },
        //获取字段值
        async getDictMap() {
            const res = await this.$API.system.dict.detail.map(Object.values(this.props))
            this.dictMap = res.data
        },
        //列表字典转换
        formatter(row, column) {
            //获取字段编码
            const code = this.props[column.property];
            if (!code) {
                return;
            }
            //获取字段明细
            const dictList = this.dictMap[code];
            if (!dictList) {
                return;
            }
            //找到对应字典项
            const dict = dictList.find(dict => dict.value === row[column.property]);
            if (dict) {
                return <el-tag type={dict.type}>{dict.label}</el-tag>;
            }
        }
    }
}
</script>

<style scoped>

</style>
